<template>
	<view class="container">
		<z-paging ref="paging" v-model="listData" @query="getData">
			<view class="content mt10">
				<view class="uni-list">
					<radio-group @change="radioChange()">
						<view class="content_item" v-for="(item, index) in listData" :key="index">
							<view class="p15">
								<view class="fs12 mb10">{{item.receiverArea}}
								</view>
								<view class="fs16 mb10">{{item.detailAdress}}</view>
								<view class="">
									<text class="fs12">{{item.receiverName}}</text>
									<text class="fs12 ml10">{{item.receiverPhone}}</text>
								</view>
							</view>
							<view class="line mb10"></view>
							<view class="pl15 pr15 pb15">
								<view class="fs12 d-flex a-center j-sb">
									<view>
										<label class="d-flex a-center" @click="radioClick(item)">
											<radio style="transform:scale(0.6)" color="#007AFF" :checked="item.isDefault =='0'" />
											<view>设为默认</view>
										</label>
									</view>
									<view class="d-flex">
										<view class="mr20" @click="delAddress(item)">删除</view>
										<view @click="editAddress(item)">修改</view>
									</view>
								</view>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			
			<template #bottom>
				<view class="add_address_box d-flex j-center a-center">
					<view class="add_address">
						<u-button color="#77C7A2" text="新增收货地址" @click="addAddress"></u-button>
					</view>
				</view>
			</template>
		</z-paging>
		
		<u-toast ref="uToast" duration="500"></u-toast>
	</view>
</template>

<script>
	import {
		queryAddressPageByApp,
		deleteAddressByApp,
		setIsDefaultAddressByApp
	} from "@/api/index.js"
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				/*是否加载完成*/
				loadding: true,
				/*数据*/
				listData: [],
				/*默认地址id*/
				default_id: '123',
				options: {},
			}
		},
		onLoad: function(options) {
			this.options = options;
		},
		onShow: function() {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			/*获取地址列表*/
			// this.getData();
			this.$refs.paging.reload()
		},
		methods: {
			/*获取数据*/
			getData(pageNo, pageSize) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryAddressPageByApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					customerCode: this.userInfo.customerCode
				}).then(res => {
					// that.listData = res.object
					// that.loadding = false;
					// uni.hideLoading();
					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},
			radioChange(val) {
				console.log(val);
			},
			/*跳转页面*/
			addAddress() {
				let delta = 1;
				if (this.options.source === 'order') {
					delta = 2;
				}
				this.gotoPage('/subpkg_my/address/add/add?delta=' + delta);
			},

			/*编辑地址*/
			editAddress(val) {
				let delta = 1;
				if (this.options.source === 'order') {
					delta = 2;
				}
				this.gotoPage('/subpkg_my/address/edit/edit?addressCode=' + val.addressCode + '&delta=' + delta);
			},

			gotoPage(url) {
				uni.navigateTo({
					url
				});
			},

			/*删除地址*/
			delAddress(data) {
				let that = this;
				wx.showModal({
					title: "提示",
					content: "您确定要移除当前收货地址吗?",
					success: function(o) {
						o.confirm && deleteAddressByApp({
							addressCode: data.addressCode
						}).then(res => {
							if (res.status == '200') {
								uni.showToast({
									title: '删除成功',
									duration: 1000
								});
								that.$refs.paging.reload()
							}
						})
					}
				});
			},

			radioClick(item) {
				const that = this
				setIsDefaultAddressByApp({
					customerCode: this.userInfo.customerCode,
					addressCode: item.addressCode
				}).then(res => {
					uni.showToast({
						title: res.message,
						duration: 1000
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
		color: #FFFFFF;
		padding-bottom: 120upx;
	}

	.container {
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;
		background-color: #f5f5f5;
		color: #FFFFFF;
		min-height: 100vh;
		

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			.content_item {
				width: 700rpx;
				background-color: #5EBF92;
				border-radius: 15rpx;
				margin-bottom: 38rpx;

				.line {
					height: 1rpx;
					background: #D8D8D8;
				}
			}
		}

		.add_address_box {
			// position: fixed;
			// bottom: 0rpx;
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;

			.add_address {
				width: 85%;
				color: #FFFFFF;
				line-height: 70rpx;
				border-radius: 35rpx;
			}
		}
	}
</style>